<template>
	<view>
		<view class="flex head-title-nav px-3">
			<view :class="navType == 0? 'active':''" @click="tabType(0)">充值记录</view>
			<view :class="navType == 0? '':'active'" @click="tabType(1)">消费记录</view>
		</view>
		<!-- 充值记录 -->
		<view v-if="navType == 0">
			<view class="flex align-center justify-between px-3 border-bottom mt-2" v-for="(item,index) in list" :key="index">
				<view class="py-2">
					<view class="">{{item.title}}</view>
					<view class="pt-2 time">{{item.paytime_text}}</view>
				</view>
				<view class="font-md">￥{{item.payamount}}</view>
			</view>
		</view>
		<!-- 消费记录 -->
		<view v-if="navType == 1">
			<view class="flex align-center justify-between px-3 border-bottom mt-2" v-for="(item,index) in xfList" :key="index">
				<view class="py-2">
					<view class="">{{item.title}}</view>
					<view class="pt-2 time">{{item.paytime}}</view>
				</view>
				<view class="font-md">￥{{item.amount}}</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { rechargeLog,postBillList } from '@/api/user.js'
	export default {
		data() {
			return {
				navType: 0, // 0充值记录  1消费记录
				list:[], // 充值记录
				xfList: [], // 消费记录
				count: 0, //总数
				page:1,
				limit:10
			}
		},
		onShow() {
			this.getList();
			this.getConsumption();
		},
		methods: {
			
			// 切换记录
			tabType(index) {
				this.navType = index;
				this.list = []
				this.xfList = []
				this.count = 0
				if(index == 0) {
					this.getList()
				} else {
					this.getConsumption()
				}
			},
			
			// 充值记录
			getList(){
				var data={
					uid:uni.getStorageSync('uid'),
					page:this.page,
					limit:this.limit
				}
				rechargeLog(data).then(res=>{
					if(res.data.code==1){
						var list = res.data.data.list;
						this.count = res.data.data.count;
						list.forEach(item => {
							this.list.push(item)
						})
					}
				})
			},
			
			// 消费记录
			async getConsumption() {
				var data = {
					page: this.page,
					limit: this.limit,
				}
				data.token = await uni.getStorageSync('token');
				var res = await postBillList(data);
				if(res.data.code == 1) {
					var list = res.data.data.list;
					this.count = res.data.data.count;
					list.forEach(item => {
						this.xfList.push(item)
					})
				}
				
			}
		},
		onReachBottom() {
			if(this.navType == 0){
				// 充值记录
				if(this.list.length < this.count) {
					++this.page
					this.getList()
				} else {
					wx.showToast({title:"已经到底了",icon: "none"})
				}
			} else {
				if(this.xfList.length < this.count) {
					++this.page
					this.getConsumption()
				} else {
					wx.showToast({title:"已经到底了",icon: "none"})
				}
			}
			
		}
	}
</script>


<style scoped>
	.time{
		color: #666666;
		font-size: 30rpx;
	}
	.head-title-nav {
		width: 100%;
		box-sizing: border-box;
	}
	.head-title-nav > view {
		width: 50%;
		padding: 30rpx 0;
		text-align: center;
		font-size: 30rpx;
		box-sizing: border-box;
	}
	
	.head-title-nav > .active {
		border-bottom: solid 4rpx #49c265;
		color: #49c265;
	}
</style>